<template>
  <div class="store-goods">
    <div class="store-goods-content">
      <ul v-if="goodsData.list?.length > 0" class="goods">
        <li v-for="goods in goodsData.list" :key="goods.goodsId" @click="onGoodsClick(goods)">
          <img :src="goods.goodsImg?.split(',')[0]" />
          <div class="info">
            <p class="goods-name">{{ goods.goodsName }}</p>
            <p class="goods-sub">{{ goods.goodsSubtitle }}</p>
            <div class="goods-supplier">
              <img src="@/assets/images/dianpuxiaobiao.png" />
              <p class="name">{{ goods.supplierName }}</p>
            </div>
          </div>
        </li>
      </ul>
      <el-empty v-else description="暂无商品"></el-empty>
      <Pager class="pager" v-if="goodsData.list?.length > 0" :page="goodsData.search.page" :total="goodsData.total" :limit="goodsData.search.limit" @current-change="onCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import Pager from '@/components/pager/index.vue'
import { SupplierStore } from '@/store/supplier'

const route = useRoute()
const router = useRouter()
const _supplierStore = SupplierStore()

const keyword = route.query.keyword || ''
const { supplierId, supplierType, goodsType, goodsCatIdFirst, goodsCatIdSecond } = route.query

const goodsData = reactive({
  total: 0,
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    searchKeyword: ''
  },
  currentGood: ''
})

let cartVisible = ref(false)
let shoopingCartRef = ref(null)

const loadData = async () => {
  if (keyword !== '') {
    let url = `/medinstrument/site/search`
    let { err, data } = await api.post(url, { supplierType, keyword, pageNum: goodsData.search.page, pageSize: goodsData.search.limit })
    if (err) {
      ElMessage.error(err)
    } else {
      goodsData.list = data.list
      goodsData.total = data.count
    }
  } else {
    let { data, err } = await api.get(`/medinstrument/site/storeIndex?supplierId=${supplierId}`, { page: goodsData.search.page, limit: goodsData.search.limit })
    if (err) {
      ElMessage.error(err)
    } else {
      goodsData.list = data.goodsList
      goodsData.total = data.count
      _supplierStore.setName(data.supplierName)
    }
  }
}

const onGoodsClick = (goods) => {
  let { href } = router.resolve({
    path: `/goods/${goods.goodsId}`
  })
  window.open(href, '_blank')
}

const onCartClick = (good) => {
  goodsData.currentGood = good
  cartVisible.value = true
}

const onCurrentChange = (val) => {
  goodsData.search.page = val
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.store-goods {
  min-height: calc(100% - 523px);
  background-color: #f8f8f8;

  .store-goods-content {
    width: 1080px;
    margin: 0 auto;

    .goods {
      padding-top: 10px;
      li {
        display: inline-block;
        width: 264px;
        height: 403px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        box-sizing: border-box;
        cursor: pointer;
        margin: 0 8px 8px 0;

        &:hover {
          border: 1px solid var(--color-primary);
        }

        &:nth-child(4n) {
          margin-right: 0;
        }

        img {
          width: 262px;
          height: 264px;
        }

        .info {
          display: flex;
          flex-direction: column;
          padding: 10px 10px 0 10px;
          box-sizing: border-box;

          .goods-name,
          .goods-sub {
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .goods-name {
            width: 244px;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: 500;
            margin: 0 0 8px 0;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .goods-sub {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: var(--color-primary);
            white-space: nowrap;
          }

          .goods-supplier {
            display: flex;
            align-items: center;
            height: 17px;
            line-height: 17px;
            color: #606266;
            margin: 20px 0;

            .name {
              margin-left: 10px;
            }

            img {
              width: 10px;
              height: 10px;
            }
          }
        }
      }
    }

    .pager {
      margin-top: 30px;
    }
  }
}
</style>
